import React, { useState, useEffect } from 'react';
import { Icon, Sketch } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';
import './index.scss';

export default () => {
  // 可从type文件引入
  type loadType = 'STATIC' | 'SUCCESS' | 'FAILED' | 'LOADING';
  // 可从type文件引入
  const LOAD_STATE: {
    [key in loadType]: loadType;
  } = {
    LOADING: 'LOADING',
    STATIC: 'STATIC',
    SUCCESS: 'SUCCESS',
    FAILED: 'FAILED',
  };

  useEffect(() => {
    setTimeout(() => {
      setState(() => LOAD_STATE.SUCCESS);
    }, 2000);
  }, []);

  const [state, setState] = useState<loadType>(LOAD_STATE.STATIC);

  return (
    <DemoBlock title="1s后组件出现">
      <Sketch mask={Mask} show={state}>
        <div className="relative_box" style={{ height: '.3rem' }}>
          出现！
        </div>
      </Sketch>
    </DemoBlock>
  );
};

export const Mask = () => (
  <div className="mask">
    <Icon type="loading" />
  </div>
);
